<template>
  <div class="element-upload">
    <!-- 文件上传 -->
    <h2>文件上传</h2>
    <el-upload
      class="upload-demo"
      ref="uploadTree"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :auto-upload="false"
    >
      <template #trigger>
        <el-button size="small" type="primary">选取文件</el-button>
      </template>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <template #tip>
        <div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
      </template>
    </el-upload>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
  name: 'ElementUpload',
  setup() {
    let uploadTree = ref()
    const fileList = reactive([
      {
        name: 'food.jpeg',
        url:
          'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      },
      {
        name: 'food2.jpeg',
        url:
          'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }
    ])
    const submitUpload = function() {
      uploadTree.value.submit()
    }
    const handleRemove = function(file, fileList) {
      console.log(file, fileList)
    }
    const handlePreview = function(file) {
      console.log(file)
    }
    return {
      uploadTree,
      fileList,
      submitUpload,
      handleRemove,
      handlePreview
    }
  }
}
</script>
<style lang="scss">
.element-upload {
  margin: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  text-align: left;
  h2 {
    margin: 10px 0;
  }
}
</style>
